<!-- -->
<template>
  <div class="deliver">
    <el-container>
      <el-header>
        <el-button
          type="danger"
          icon="el-icon-delete"
          plain
          title="批量删除"
          @click="deleteAll()"
        >批量删除</el-button>
        <el-input
          style="width:220px;margin-left:14px;"
          v-model="searchDeliver"
          placeholder="请输入快递编号"
        ></el-input>
        <el-button
          icon="el-icon-search"
          type="primary"
          style="margin-left:14px;"
          @click="searchDeliverList()"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" type="success" @click="refresh()">刷新</el-button>
      </el-header>
      <el-main>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <span class="total">共有数据 {{totalSize}} 条</span>
        <el-table :data="tableData" style="width: 100%;margin-top:2%;">
          <el-table-column
            align ="center"
            width = "60">
            <template slot-scope="scope">
              <el-checkbox-group v-model="checkedId" @change="handleCheckedChange">
                <el-checkbox :key="scope.row.id" :label="scope.row.id">{{""}}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column label="快递ID" prop="id"></el-table-column>
          <el-table-column label="快递编号" prop="number"></el-table-column>
          <el-table-column
            label="快递公司"
            prop="companyName"
          ></el-table-column>
          <el-table-column label="建立时间" prop="createTime"></el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-button @click="pre" :disabled="preBool">上一页</el-button>
        <el-input
          v-model="pageNum"
          readonly="readonly"
          style="width:60px;"
        ></el-input>
        <el-button @click="add" :disabled="addBool">下一页</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Deliver",
  data() {
    return {
      searchDeliver: "",
      dialogVisible: false,
      labelPosition: "right",
      options: [],
      addForm: {
        companyId: "",
        oid: "",
        number: ""
      },
      tableData: [],
      // 分页
      pageNum: 1,
      addBool: false,
      preBool: true,
      pageSize: 10,
      totalPages: "",
      totalSize: "",
      pages: "",

       // 全选
      checkAll: false,
      checkedId: [],
      isIndeterminate: true,
    };
  },
  created() {
    this.getDeliverList();
    this.getDeliverComponey();
  },
  watch: {
    pageNum: function(Val) {
      if (Val === 1) {
        this.preBool = true;
        this.addBool = false;
      } else if (Val === this.totalPages) {
        this.addBool = true;
        this.preBool = false;
      } else {
        this.preBool = false;
        this.addBool = false;
      }
    }
  },
  components: {},

  filters: {},

  computed: {},

  methods: {
    handleCheckedChange(value = []) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
      console.log(this.checkedId)
    },
    handleCheckAllChange(val) {
      this.checkedId = []
      this.checkAll = val;
      this.isIndeterminate = !val;
      if(this.checkAll) {
        this.tableData.forEach(data => {
          this.checkedId.push(data.id);
        });
      }
      console.log(this.checkedId)
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.fixForm = row;
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteCategoryList(index, id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      if (this.pageNum < this.totalPages) {
        this.pageNum++;
        this.getDeliverList();
      } else {
        this.addBool = true;
      }
    },
    pre() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.getDeliverList();
      } else {
        this.preBool = true;
      }
    },
    Success(index) {
      this.$message.success(index);
    },
    Fail(index) {
      this.$message.error(index);
    },
    refresh() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.searchUser = "";
      this.getDeliverList();
    },
    getDeliverList() {
      this.axios
        .put("/api/deliver", {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            // for (let item of res.data.data) {
            //   item._createTime = item.createTime ? item.createTime : "暂无记录";
            // }
            this.tableData = list.content;
          }else{
            this.totalPages = 0;
            this.totalSize = 0;
            this.tableData = [];
          }
        });
    },
    getDeliverComponey() {
      this.axios.get("/api/deliverCompany").then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
          let bufferList = [];
          for (let key in res.data.data.list) {
            let i = new Object();
            i.value = res.data.data.list[key].id;
            i.label = res.data.data.list[key].name;
            bufferList.push(i);
          }
          this.options = bufferList;
        }
      });
    },
    addDeliverList() {
      if (
        this.addForm.number === "" ||
        this.addForm.oid === "" ||
        this.addForm.companyId === ""
      ) {
        this.Fail("信息不足，无法添加。请填写全部信息重新提交");
      } else {
        this.dialogVisible = false;
        this.axios
          .post("/api/deliver", {
            companyId: this.addForm.companyId,
            oid: Number(this.addForm.oid),
            number: this.addForm.number
          })
          .then(res => {
            console.log(res.data);
            if(res.data.code === 200){
              this.Success("添加成功");
            }
            else{
              this.Fail("添加失败");
            }
          })
          .catch(error => {
            console.log(error);
            this.Fail("添加失败");
          });
      }
    },
    searchDeliverList(){
      this.pageNum = 1;
      this.pageSize = 10;
      this.axios
        .post("/api/deliver/search", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          number: this.searchDeliver
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            let list = res.data.data;
            this.totalPages = list.totalPages;
            this.totalSize = list.totalSize;
            this.pageNum = list.pageNum;
            this.pageSize = list.pageSize;
            this.tableData = list.content;
          }
        });
    },
    deleteAll() {
      var data = {
        ids: this.checkedId
      }
      var params = this.qs.stringify(data, { indices: false })
      this.axios.delete('/api/deliver?'+params
      ).then(response => {
        console.log(response);
        if(response.data.code == 200) {
          this.getDeliverList();
          this.Success("删除成功");
        } else {
          this.Fail("删除失败");
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>
<style scoped>
.total {
  font-size: 14px;
  margin-left: 50px;
  color: #606266;
}
.deliver {
  height: 100%;
  width: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  line-height: 60px;
}
.el-main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.el-footer {
  line-height: 60px;
  text-align: right;
}
</style>